<template>
  <i class="vk-icon" :class="{[`vk-icon--${type}`]:type}" :style="customStyles" v-bind="$attrs">
    <font-awesome-icon v-bind="filteredProps"></font-awesome-icon>
  </i>
</template>

<script setup lang="ts">
import { omit } from 'lodash-es'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import type { IconProps } from "@/components/Icons/types";
import { computed } from "vue";
defineOptions({
  name:'VKIcon',
  inheritAttrs:false
})
 const props = defineProps<IconProps>()
const filteredProps = computed(() => omit(props,['type','color']))
const customStyles = computed(() => props.color ? { color : props.color } : {})
</script>

<style scoped>

</style>
